<template>
    <div id="Approval">
        <div id="addAndSearch">
            <div id="search">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">

                    <el-input v-model="formInline.search"   @keyup.enter="onSearch()" placeholder="输入客户姓名"></el-input>

                    <el-form-item>
                        <el-button type="primary" @click="onSearch()">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div id="formDiv">
            <div id="editDialog">
                <el-dialog
                        title="外出请求审批"
                        :visible.sync="centerDialogVisible"
                        width="30%"
                        center
                >
                    <div>
                        <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="审批意见">
                            <el-select v-model="formInline.region" placeholder="">
                                <el-option label="通过" value="通过"></el-option>
                                <el-option label="不通过" value="不通过"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false,resetForm()">取 消</el-button>
          <el-button
                  type="primary"
                  @click="
              centerDialogVisible = false,
              onSubmit()
            "
          >确 定</el-button
          >
        </span>
                </el-dialog>
            </div>
            <el-table
                    :data="ApprovalList"
                    border
                    style="width: 1235px"
            >
                <el-table-column fixed prop="id" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="name" label="客户姓名" width="100">
                </el-table-column>
                <el-table-column prop="tel" label="电话" width="120">
                </el-table-column>
                <el-table-column prop="reason" label="外出事由" width="120">
                </el-table-column>
                <el-table-column prop="go_out_date" label="外出时间" width="120">
                </el-table-column>
                <el-table-column prop="due_date" label="预计回院时间" width="120">
                </el-table-column>
                <el-table-column prop="accompany" label="陪同人" width="100">
                </el-table-column>
                <el-table-column prop="relationship" label="与老人关系" width="100">
                </el-table-column>
                <el-table-column prop="status" label="审批状态" width="100">
                </el-table-column>
                <el-table-column label="操作" width="60">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                @click="
                centerDialogVisible = true,
                approveClick(scope.row)
              "
                                size="middle"
                        >审批</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
            <el-row style="float: right;margin: 0">
                <label>当前为第{{this.page.nowpage}}页，共计{{this.page.totalPage}}页</label>
                <el-form :inline="true">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()">上一页</el-button>
                        <el-button type="primary" @click="increase_page()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                        <el-input type="primary" placeholder="请输入页码" style="max-width: 120px"
                                  v-model="page.page_input"
                        ></el-input>
                        <el-button type="primary" @click="change_page()">Go!</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
    </div>
</template>

<script>
    import qs from 'qs'
    const axios = require("axios");
    export default {
        mounted() {
            console.log(this.$route.query.uname);
            this.getApproval("1");
        },
        methods: {
            increase_page() {
                if(this.page.nowpage<this.page.totalpage) {
                    this.$data.page.nowpage++;
                    this.getApproval(this.page.nowpage);
                }
            },
            decrease_page() {
                if (this.$data.page.nowpage > 1) {
                    this.$data.page.nowpage--;
                }
                this.getApproval(this.page.nowpage)
            },
            change_page() {
                let num = parseInt(this.$data.page_input);
                if (isNaN(num)) {
                    alert("请输入正确的数字！");
                    this.$data.page.page_input = '';
                } else if (num <= 0) {
                    alert("请输入正整数！");
                    this.$data.page.page_input = '';
                } else {
                    this.$data.page.current_page = num;
                    this.getApproval(this.page.page_input);
                }
            },
            searchByName(search) {
                if (search == "") {
                    this.getApproval(1);
                    this.page.nowpage = 1;
                } else {
                    axios({
                        method: 'post',
                        url: '/api/approval_page/search_by_name',
                        data: qs.stringify({'name':search,'page':this.$data.page.nowpage}),
                    })
                        .then(
                            (res) => {
                                console.log(res);
                                if(res.data.errMsg=='没有待审核信息'){
                                    alert('没有待审核信息');
                                }
                                else {
                                    this.ApprovalList = res.data.data.approvalGoOutRecords;
                                }
                            },
                            (res) => {
                            }
                        );
                }

            },
            onSearch() {
                console.log(this.formInline.search);
                this.searchByName(this.formInline.search);
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        done();
                    })
                    .catch((_) => {});
            },
            handleCurrentChange(val) {
                /*console.log(val);*/
                this.getApproval(val);
                this.page.nowpage=val;
            },
            getApproval(page) {
                axios({
                    method:'post',
                    url:'/api/approval_page/getApproval',
                    data:qs.stringify({'page':page}),
                }).then(
                    (res) => {
                        console.log(res);
                        this.ApprovalList = res.data.data.approvalGoOutRecords;
                        this.page.totalPage=res.data.data.totalPage;
                    },
                    (res) => {}
                );
            },
            approveClick(row) {
               this.approveid=row.id;
            },
            onSubmit() {
                console.log(this.formInline.region);
                if (this.formInline.region == "通过") {
                    console.log("通过");
                    this.approveYes();
                } else {
                    console.log("不通过");
                    this.approveNo()
                }
            },
            approveYes(){
                axios({
                    method:'post',
                    url:'/api/approval_page/approvalYes',
                    data:qs.stringify({'uname':this.$route.query.uname,'id':this.$data.approveid}),
                }).then(
                    (res) => {
                        this.getApproval(this.$data.page.nowpage);
                    },
                    (res) => {}
                );
            },
            approveNo(){
                axios({
                    method:'post',
                    url:'/api/approval_page/approvalNo',
                    data:qs.stringify({'uname':this.$route.query.uname,'id':this.$data.approveid}),
                }).then(
                    (res) => {
                        this.getApproval(this.$data.page.nowpage);
                    },
                    (res) => {}
                );
            }
        },

        data() {
            return {
                ApprovalList: [],
                approveid:"",
                page:{
                    page_input:'',
                    nowpage: 1,
                    totalPage:'',
                },
                addDialogVisible: false, //add彈出框屬性
                centerDialogVisible: false, //
                formInline: {
                    search: "",
                    region:"",
                },
                username:"",
                value:'',
                form: {
                    //用戶資料
                    name: "",
                    sex:"",
                    salary:"",
                    age:"",
                    telephone:"",
                    employ_number:"",
                    power: "",
                    remarks:"",
                    status:"",
                    pwd:"",
                    id:"",
                },
            };
        },
    };
</script>

<style>

    #Approval {
        width: 100%;
        height: 100%;
    }
    #Approval #formDiv{
        margin-right: 40px;
        margin-left: 40px;
    }
    #Approval #addAndSearch {
        padding: 20px;
        width: 100%;
        height: 50px;
    }
    #Approval #addAndSearch .el-input {
        width: 200px;
    }

    #Approval #addAndSearch #search {
        float: right;
        margin-right: 60px;
    }
    #Approval #addAndSearch #search .el-input {
        width: 120px;
    }
    #Approval #page {
        bottom: 0;
        left:50%;
        position: absolute;
    }

    /*#Approval #formDiv .el-table th,#Approval #formDiv .el-table tr,#Approval #formDiv .el-table__empty-block,#Approval .el-table__row td*/
    /*{*/
    /*    border: 1px solid #CBCBCB;*/
    /*    background-color: #EEEEEE;*/
    /*}*/
</style>

